<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1200px">

        <el-form :model="form" class="form-inline" ref="form" label-width="150px" size="mini">
            <el-steps :active="reportStatus" align-center style="margin-bottom:20px">
                <el-step v-for="(item, index) in stepList" :key="index" :title="item.label"
                    :description="item.time"></el-step>
            </el-steps>
            <el-tabs v-model="activeName">
                <el-tab-pane v-if="this.fileList.length > 0" label="文件/赔付额" name="zero">
                    <ul>
                        <li>1、运单</li>
                        <li>2、索赔函</li>
                        <li>3、购销合同及发票</li>
                        <li>4、双港过磅单</li>
                        <li>5、现场照片</li>
                    </ul>
                    <el-form-item label="赔付额">
                        {{ lossMoney }}
                    </el-form-item>
                    <el-form-item label="图片文件">
                        <div style="margin-left:90px">
                        <div v-for="(item, index) in fileList" :key="index"
                            style="display:inline-block; position:relative">
                            <el-image style="width: 100px; height: 100px; " :src="item" :preview-src-list="fileList">
                            </el-image>
                        </div>
                    </div>
                    </el-form-item>
                    
                </el-tab-pane>
                <el-tab-pane label="理赔账号信息" name="first">
                    <el-card class="box-card" shadow="never">
                        <el-row :gutter="4">
                            <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">投保人信息</div>
                                </div>
                            </el-col>
                            <el-col :span="8"><el-form-item label="开户名称" style="width:100%">
                                    {{ row.accountName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="开户类型">
                                    {{ row.accountType }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item style="width:100%" label="地区">
                                    {{ row.areaName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="地区银行" style="width:100%">
                                    {{ row.bankName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="分支行名称">
                                    {{ row.bankBranchName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item style="width:100%" label="卡号">
                                    {{ row.accountNumber }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="联系方式" style="width:100%">
                                    {{ row.contactPhone }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="证件号码">
                                    {{ row.certificateNumber }}
                                </el-form-item></el-col>
                            <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">报案信息</div>
                                </div>
                            </el-col>
                            <el-col :span="8"><el-form-item label="货物名称" style="width:100%">
                                    {{ row.goodsName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="出险箱号" style="width:100%">
                                    {{ row.containerNumber }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="损失金额" style="width:100%">
                                    {{ row.lossFee }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="现场联系人" style="width:100%">
                                    {{ row.sceneName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="联系方式" style="width:100%">
                                    {{ row.scenePhone }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="出险地址" style="width:100%">
                                    {{ row.reportPlace }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="出险原因" style="width:100%">
                                    {{ row.reportCause }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="损失情况说明" style="width:100%">
                                    {{ row.explain }}
                                </el-form-item></el-col>
                        </el-row>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="保单基本信息" name="second">
                    <el-card class="box-card" shadow="never">
                        <el-row :gutter="4">
                            <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">投保人/被投保人信息</div>
                                </div>
                            </el-col>
                            <el-col :span="8"><el-form-item label="投保人" style="width:100%">
                                    {{ row.insureName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="证件类型">
                                    {{ row.insureCertificateType == 1 ? '身份证' : '统一社会信用代码' }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item style="width:100%" label="证件号码">
                                    {{ row.insureCertificateNumber }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="被投保人" style="width:100%">
                                    {{ row.insuredName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="证件类型">
                                    {{ row.insuredCertificateType == 1 ? '身份证' : '统一社会信用代码' }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item style="width:100%" label="证件号码">
                                    {{ row.insuredCertificateNumber }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="联系人" style="width:100%">
                                    {{ row.contactName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="联系方式">
                                    {{ row.contactPhone }}
                                </el-form-item></el-col>
                            <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">货运信息</div>
                                </div>
                            </el-col>
                            <el-col :span="8"><el-form-item label="标记发票号码运单号" style="width:100%">
                                    {{ row.tagInvoiceWaybill }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="包装和数量" style="width:100%">
                                    {{ row.containerCount }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="货物类型" style="width:100%">
                                    {{ row.insureGoodsJson ? JSON.parse(row.insureGoodsJson).goodsTypeName : '' }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="货物明细" style="width:100%">
                                    {{ row.goodsName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="包装" style="width:100%">
                                    {{ row.packName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="集装箱号" style="width:100%">
                                    {{ row.containerNumber }}
                                </el-form-item></el-col>
                            <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">运输信息</div>
                                </div>
                            </el-col>
                            <el-col :span="8"><el-form-item label="运输工具" style="width:100%">
                                    {{ row.transportTool }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="航次/车牌号" style="width:100%">
                                    {{ row.shipNumber }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="运输方式" style="width:100%">
                                    {{ row.transportTypeName }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="启运地" style="width:100%">
                                    {{ row.startPlace }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="中转地" style="width:100%">
                                    {{ row.middlePlace }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="目的地" style="width:100%">
                                    {{ row.endPlace }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="启用日期" style="width: 100%">
                                    <span>{{ row.startTime
                                        }}</span>
                                </el-form-item></el-col>
                            <!-- <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">扩展保险责任</div>
                                </div>
                            </el-col> -->
                            <!-- <el-col :span="24"><el-form-item label="" style="width:100%">
                                    江苏省南京市雨花客厅
                                </el-form-item></el-col> -->
                            <div style="overflow:hidden; margin:12px 0">
                                <div
                                    style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                </div>
                                <div style="float:left">费用信息</div>
                            </div>
                            <el-col :span="8"><el-form-item label="保险金额" style="width:100%">
                                    {{ row.totalFee }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="保险费率（单位‰）" style="width:100%">
                                    {{ row.insureRate * 10 }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="保险费用" style="width:100%">
                                    {{ row.insureFee }}
                                </el-form-item></el-col>
                            <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">发票信息</div>
                                </div>
                            </el-col>
                            <el-col :span="8"><el-form-item label="开具发票" style="width:100%">
                                    {{ row.invoiceStatus ? '是' : '否' }}
                                </el-form-item></el-col>
                            <el-col :span="8"><el-form-item label="发票类型" style="width:100%">
                                    {{ row.invoiceStatus * 1 === 1 ? '专票' : '普票' }}
                                </el-form-item></el-col>

                            <div v-if="row.invoiceStatus">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="发票抬头">
                                            <span @click="copyClick(row.invoiceHead)" class="cursorPointer">{{
        row.invoiceHead }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <!-- <el-col :span="8">
            <el-form-item label="企业名称">
              {{ row.invoiceHead }}
              <el-input readonly v-model="row.consigneeName" />
            </el-form-item>
          </el-col> -->
                                    <el-col :span="8">
                                        <el-form-item label="税号">
                                            <span @click="copyClick(row.creditCode)" class="cursorPointer">{{
        row.creditCode }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" v-if="row.invoiceType === 2">
                                        <el-form-item label="收件人名称">
                                            <span @click="copyClick(row.consigneeName)" class="cursorPointer">{{
        row.consigneeName }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" v-if="row.invoiceType === 2">
                                        <el-form-item label="收件人地址">
                                            <span @click="copyClick(row.consigneeAddress)" class="cursorPointer">{{
        row.consigneeAddress }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8" v-if="row.invoiceType === 2">
                                        <el-form-item label="收件人电话">
                                            <span @click="copyClick(row.consigneePhone)" class="cursorPointer">{{
        row.consigneePhone }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="注册地址">
                                            <span @click="copyClick(row.registerAddress)" class="cursorPointer">{{
        row.registerAddress }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="统一信用代码">
                                            <span @click="copyClick(row.creditCode)" class="cursorPointer">{{
        row.creditCode }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="银行名称">
                                            <span @click="copyClick(row.bankBranchName)" class="cursorPointer">{{
                                                row.bankBranchName }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="银行账号">
                                            <span @click="copyClick(row.bankAccount)" class="cursorPointer">{{
                                                row.bankAccount }}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    </el-card>
                </el-tab-pane>
            </el-tabs>

            <el-col :span="24" v-if="isExamine"><el-form-item label="审核">
                    <el-select v-model="form.region" placeholder="审核">
                        <el-option label="通过" value="shanghai"></el-option>
                        <el-option label="不通过" value="beijing"></el-option>
                    </el-select>
                </el-form-item></el-col>
            <el-col :span="24" v-if="isExamine"><el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item></el-col>
        </el-form>


        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getLabel } from '@/utils/func.js'
import { ReportStatus } from '@/utils/options'
export default {
    data() {
        return {
            lossMoney: 0,
            fileList: [],
            getLabel,
            ReportStatus,
            reportStatus: 0,
            stepList: [],
            activeName: 'first',
            title: '查看',
            dialogFormVisible: false,
            isExamine: false,
            form: {
                user: '',
                region: '',
                desc: ''
            },
            row: {}
        }
    },
    methods: {
        followingClick(orderNum) {
            this.showFollowing = true
            this.$post("/warranty/report/reportprocess", {
                orderNum
            }).then(res => {
                this.stepList = []
                res.data.forEach(item => {
                    this.stepList.push({
                        label: getLabel(ReportStatus, item.reportStatus),
                        time: item.createTime || item.updateTime
                    })
                })
                this.reportStatus = res.data.length ? res.data.length : 0

                const item = res.data.find(item => item.reportStatus == '4')
                console.log('item', item)
                this.lossMoney = item ? item.lossMoney : 0
                this.fileList = item ? item.lossFiles.split(';') : []
            })
        },
    }
}
</script>
